<template>
  <div style="height: 785px">


    <el-row :gutter="0" style="background: white;margin: -20px;">
      <el-col :span="24" :offset="0">
        <div style="border-bottom: 1px solid #CCC;margin-bottom: 10px"><h1>还款</h1></div>
        <div>剩余未还本金（元）</div>
        <div><h1>{{ allmoney }}</h1></div>
        <div>共{{ count }}笔</div>
      </el-col>
    </el-row>

    <div style="margin-top: 15px;height:5px"></div>




    <el-form ref="form" :model="form1" label-width="80px" label-position="top">



      <el-row :span="8" v-for="(o, index) in form1" :key="o" style="margin-top: 20px;text-align: left">
        <el-col>
          <el-card :body-style="{ padding: '10px' }">
            <div style=""><!--@click='getIndex(index)'-->
              {{ o.difference }}
            </div>
            <div style="">
              还款截止日期：{{ o.endtime }}

              <el-radio-group v-model="radioTreaty" @change="agreeChange">
                <el-form-item  label="" style="border: none;color: white">
                  <el-radio v-model="o.radio" :label="index+'='+o.difference+'='+o.loanapplicationId" style="float: right;color: white"></el-radio><!--index+'='+o.difference-->
                </el-form-item>
              </el-radio-group>

            </div>
            <div style="">
              {{ o.starttime }} 借{{ o.money }}元 / 每月等额
            </div>
          </el-card>
        </el-col>
      </el-row>



      <el-row :gutter="0" style="border: 1px solid white;margin-top: 20px">
        <el-col :span="12" :offset="0" style="text-align: left">
          总共{{ countReal }}笔 合计 {{ allmoneyReal }} 元<span style="color: red">{{ loanapplicationId2 }}</span>
        </el-col>
        <el-col :span="6" :offset="6" style="text-align: left">
          <el-button type="primary" @click="goReal(loanapplicationId2)">去还款</el-button>
        </el-col>
      </el-row>

    </el-form>


  </div>
</template>

<script>
  import axios from 'axios'
    export default {
      name: "repayment",
      checked: true,
      data() {
        return {
          allmoney:'',
          count:'',
          form1: [],
          input:'',
          radioTreaty: '1',
          num:9,
          countReal:0,
          allmoneyReal:0,
          loanapplicationId2:0,
        };
      },
      methods: {
        getIndex:function(inpu){
          alert("--------------------------zhy2"+inpu);

        },
        agreeChange:function(val){
          // alert("--------------------------zhy"+val);
          var str = val.split("=")[1];
          // alert("--------------------------str="+str);
          this.allmoneyReal=str;
          this.countReal=1;
          this.loanapplicationId2 = val.split("=")[2];
        },
        sum:function(){
          axios.post("http://localhost:9999/credit-repayment/sum",{id:1}).then(res=>{
            this.allmoney= res.data.message;
          })
        },

        findAll:function(){
          axios.post("http://localhost:9999/credit-repayment/reOrder",{id:1,status:"已通过"}).then(res=>{
           //alert(res.data.message)
           //this.form1= res.data.message;
            this.count=res.data.total
          })
        },
        goReal:function(loanapplicationId){
          //this.$router.push({"/repaymentReal",params:{id:id}})
          // alert("loanapplicationId====================="+loanapplicationId);
          this.$router.push({path:'repaymentReal', query:{loanapplicationId:loanapplicationId}})
        },
        findBill:function () {
          axios.post("http://localhost:9999/credit-repayment/findBill",{id:1}).then(res=>{
            console.log(res.data.message);
            if(res.data.code==200){
              this.form1=res.data.message;
            }
          })
        }

      },
      mounted (){
        this.sum()
        this.findAll()
        this.findBill()
      }
    }
</script>

<style scoped>

</style>
